<template>
	<div id="creatdoc">
		<!-- 创建医生 -->
		<div class="registerBox">
			<div class="box">
				<h1>创建账号</h1>
				<ul class="steps">
					<template v-for="(item,i) in steps">
						<li :key="i" v-if="item.active<3">
							<div class="icon" v-if="item.active==2">
								0{{i+1}}
							</div>
							<div :class="item.active == 1?`icon active`:`icon`" v-if="item.active==1">
								<i class="el-icon-check" style="font-size:18px;"></i>
							</div>
							{{item.title}}
						</li>
					</template>
				</ul>
				<div class="StepBox">Step 1/{{steps.length}}</div>
				<p class="StepTitle">创建账号</p>
				<el-form :model="registerForm" :rules="rules" ref="registerForm" label-position="top">
					<el-form-item label="手机号" prop="phoneNumber">
						<el-input clearable v-model="registerForm.phoneNumber" placeholder="请输入手机号" maxlength="11">
						</el-input>
					</el-form-item>
					<el-form-item label="验证码" prop="verifyCode" v-if="token.type != 'ASSISTANT'">
						<el-input clearable v-model="registerForm.verifyCode" maxlength="6" placeholder="请输入验证码">
							<el-button :disabled="disabled" slot="append"
								@click="sendCodeFun()">{{sendCodeText}}</el-button>
						</el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input clearable show-password v-model="registerForm.password"
							placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="确认密码" prop="confirmPassWord">
						<el-input clearable show-password v-model="registerForm.confirmPassWord"
							placeholder="请输入内容"></el-input>
					</el-form-item>
					<!-- <el-form-item>
						<el-checkbox v-model="checked">
							已阅读并同意
							<b @click.stop="agreement()" style="color: #409EFF;">《万木智会--用户使用协议》</b>
						</el-checkbox>
					</el-form-item> -->
					<el-form-item>
						<div class="options">
							<el-button class="bank" @click="bank()">返回</el-button>
							<el-button class="next" @click="onSubmit('registerForm')">下一步</el-button>
						</div>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		sendCode,
		register
	} from '@/request/api.js';
	export default {
		name: 'creatdoc',
		data() {
			return {
				token: '',
				checked: true,
				seconds: 60,
				disabled: false,
				sendCodeText: '获取验证码',
				registerForm: {
					phoneNumber: '',
					verifyCode: '',
					password: '123456',
					confirmPassWord: '123456'
				},
				rules: {
					phoneNumber: [{
						required: true,
						message: '请输入手机号',
						trigger: 'change'
					}, {
						validator: (rule, value, callback) => {
							if (!/^1[3-9]\d{9}$/.test(value)) {
								callback(new Error('请输入正确的手机号!'));
							} else {
								callback();
							}
						},
						trigger: 'blur'
					}],
					verifyCode: [{
						required: true,
						message: '请输入验证码',
						trigger: 'change'
					}, {
						min: 4,
						max: 6,
						message: '请输入正确的验证码格式',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'change'
					}, {
						min: 4,
						message: '请至少输入6位字符的密码',
						trigger: 'blur'
					}],
					confirmPassWord: [{
						required: true,
						message: '请输入确认密码',
						trigger: 'change'
					}, {
						validator: (rule, value, callback) => {
							if (value !== this.registerForm.password) {
								callback(new Error('两次输入密码不一致!'));
							} else {
								callback();
							}
						},
						trigger: 'change'
					}]
				},
				steps: [{
					title: '创建账号',
					active: 2
				}, {
					title: '上传认证',
					active: 3
				}, {
					title: '完善信息',
					active: 3
				}, {
					title: '参与项目',
					active: 3
				}],
				objectId: ''
			}
		},
		created() {
			this.token = JSON.parse(localStorage.getItem('token'))
		},
		methods: {
			// 获取验证码
			sendCodeFun() {
				if (!this.registerForm.phoneNumber) {
					this.$notify({
						title: '提示',
						type: 'warning',
						message: '请输入手机号',
						position: 'bottom-right'
					});
					return false;
				} else if (!/^1[3-9]\d{9}$/.test(this.registerForm.phoneNumber)) {
					this.$notify({
						title: '提示',
						type: 'warning',
						message: '请输入正确的手机号',
						position: 'bottom-right'
					});
					return false;
				} else {
					sendCode(this.registerForm.phoneNumber)
						.then(res => {
							if (res.code == 200) {
								this.countDown();
								this.$notify({
									title: '提示',
									type: 'success',
									message: '获取验证码成功',
									position: 'bottom-right'
								});
							} else {
								this.$notify({
									title: '错误',
									type: 'error',
									message: res.msg,
									position: 'bottom-right'
								});
							}
						})
				}
			},

			// 倒计时
			countDown() {
				this.disabled = true;
				this.sendCodeText = `${this.seconds}秒后重新获取`;
				if (this.seconds > 0) {
					this.seconds--;
					setTimeout(() => {
						this.countDown(this.seconds)
					}, 1000);
				} else {
					this.sendCodeText = '再次获取';
					this.disabled = false;
					this.seconds = 60;
				}
			},

			agreement() {
				console.log(1)
			},

			onSubmit(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if (this.$route.query.pId) this.registerForm.projectId = this.$route.query.pId;
						register(this.registerForm).then(res => {
							if (res.code == 200) {
								localStorage.setItem('regToken', JSON.stringify(res.data));
								let routerData = {
									name: 'upInfo',
								}
								routerData.query = this.$route.query;
								if (this.objectId) routerData.objectId = this.objectId;
								this.$notify({
									title: '提示',
									type: 'success',
									message: '创建账号成功',
									position: 'bottom-right'
								});
								this.$router.push(routerData);
							} else {
								this.$notify({
									title: '错误',
									type: 'error',
									message: res.msg,
									position: 'bottom-right'
								});
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},

			bank() {

				this.$router.go(-1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	#creatdoc {
		padding: 20px;
		height: 100%;

		.registerBox {
			width: 600px;
			height: 100%;
			display: flex;
			overflow: hidden;
			border-radius: 20px;
			flex-direction: row;
			box-shadow: 0 0 20px rgba(0, 0, 0, .1);

			.banner,
			.box {
				width: 600px;
				background-color: #fff;
			}

			.banner {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.logo {
					flex: 1;
					width: 100%;
					display: flex;
					flex-direction: row;
					align-items: flex-start;
					padding: 40px 0 0 40px;

					img {
						height: 80px;
					}
				}

				.back {
					width: 400px;
					margin-bottom: 100px;
				}
			}

			.box {
				display: flex;
				align-items: center;
				flex-direction: column;
				padding: 50px;
				overflow: hidden;
				overflow-y: auto;
				box-sizing: border-box;

				h1 {
					font-size: 20px;
					margin-bottom: 30px;
					color: #112950;
				}

				.steps {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-start;
					width: 100%;
					margin-bottom: 20px;

					li {
						display: flex;
						color: #112950;
						font-size: 16px;
						align-items: center;
						margin-right: 16px;

						.icon {
							width: 28px;
							height: 28px;
							background: #007AFF;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-right: 5px;
							border-radius: 5px;
							color: #fff;
							font-size: 14px;
						}

						.active {
							background: #ECF3FE;
							color: #007AFF;
						}
					}
				}

				.StepBox {
					width: 500px;
					font-size: 13px;
					color: #112950;
					margin-bottom: 20px;
				}

				.StepTitle {
					width: 500px;
					font-size: 22px;
					color: #112950;
					border-bottom: 1px solid #E5E5E5;
					padding-bottom: 10px;
					margin-bottom: 20px;
				}

				::v-deep .el-form {
					width: 500px;

					.el-form-item__label {
						padding: 0;
						line-height: 1;
						color: #112950;
					}

					.el-input__inner {
						border: none;
						border-bottom: 1px solid #E5E5E5;
						border-radius: 0;
					}

					.el-input-group__append {
						background-color: #fff;
						border: none;
						border-bottom: 1px solid #E5E5E5;
					}

					.el-checkbox {
						display: flex;
						align-items: center;
					}

					.options {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						margin-top: 40px;

						.el-button {
							width: 300px;
							height: 50px;

						}

						.next {
							background-color: #007AFF;
							color: #fff;
						}

						.back {}
					}
				}

			}
		}

	}
</style>